<template>
  <div class="index_container">
    <div class="padd100">
      <el-row :gutter="20">
        <el-col :lg="16">
          <!-- 热门推荐 -->
          <div class="hot_recommend_container">
            <div class="panel_title">
              <h3>热门推荐</h3>
              <el-button link type="primary" @click="()=>{router.push('/discover/playlist')}">更多 &gt</el-button>
            </div>
            <div class="panel_content">
              <div class="ht_recommend_music_wrapper">
                <el-row :gutter="20">
                  <el-col :lg="6" :sm="6" :md="6" :xs="12" v-for="item in hotPlayListData" :key="item.id"
                    style="margin-bottom:10px">
                    <MusicHead :authorInfo="false" @handleClickToListDetail="handleClickToListDetail"
                      :playCount="item.playCount" :name="item.name" :coverImgUrl="item.picUrl + '?param=260y150'"
                      :id="item.id" />
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
          <!-- 新碟上架 -->
          <div class="new_cd_container">
            <div class="panel_title">
              <h3>新碟上架</h3>
              <el-button link type="primary" @click="()=>{router.push('/discover/album')}">更多 &gt</el-button>
            </div>
            <div class="panel_content">
              <div class="new_cd_wrpper">
                <!--!!!!js移动端判断移动端 5要改成 3 :slides-per-view="5"  :slidesPerGroup="5" -->
                <swiper @swiper="onSwiper" loop :modules="modules" :navigation="true" :slides-per-view="5"
                  :space-between="30" :slidesPerGroup="5" class="new_cd_swiper">
                  <swiper-slide v-for="item in albumNewestData" :key="item.id">
                    <CdMusic @handleClickToAlbumDetail="handleClickToAlbumDetail" :id="item.id"
                      @handleClickToArtistDetail="handleClickToArtistDetail" :picUrl="item.picUrl + '?param=260y150'"
                      :artists="item.artists" :name="item.name" :isLazy="false" />
                  </swiper-slide>
                </swiper>
              </div>
            </div>
          </div>
          <!-- 榜单 -->
          <div class="top_container">
            <div class="panel_title">
              <h3>榜单</h3>
              <el-button link type="primary" @click="()=>{router.push('/discover/toplist')}">更多 &gt</el-button>
            </div>
            <div class="panel_content">
              <el-row>
                <el-col :lg="8" :md="8" style="margin-bottom:20px">
                  <div class="top_item">
                    <div class="top_title_msg">
                      <div class="left_top_img">
                        <img src="http://p4.music.126.net/pcYHpMkdC69VVvWiynNklA==/109951166952713766.jpg?param=100y100"
                          alt="">
                      </div>
                      <div class="right_tit_wrap">
                        <div class="r_tit">
                          飙升榜
                        </div>
                        <div class="r_icon">
                          <el-tooltip class="box-item" effect="dark" content="播放" placement="top-start">
                            <span class="cursor_class">
                              <el-icon @click="handleClickPlayAll(1)">
                                <VideoPlay />
                              </el-icon>
                            </span>
                          </el-tooltip>
                          <el-tooltip class="box-item" effect="dark" content="收藏" placement="top-start">
                            <span style="margin-left:10px" class="cursor_class"
                              @click="handleClickCollectionPlayList(1)">
                              <el-icon>
                                <FolderAdd />
                              </el-icon>
                            </span>
                          </el-tooltip>
                        </div>
                      </div>
                    </div>
                    <!-- v-loading="loading1" -->
                    <div class="bottom_music_list">
                      <p class="top_music_item " v-for="(item,index) in hotMusicTopListData" :key="item.id">
                        <span class="num">{{index + 1}}</span>
                      <div class="content cursor_class text_ellipsis text_decoration"
                        @click="handleClickTopListSongName(item.id)">
                        {{item.name}}</div>
                      <div class="opeation_wrpper">
                        <el-tooltip class="box-item" effect="dark" content="播放" placement="top-start">
                          <span class="cursor_class">
                            <el-icon @click="handleClickPlay(item)">
                              <VideoPlay />
                            </el-icon>
                          </span>
                        </el-tooltip>
                        <el-tooltip class="box-item" effect="dark" content="添加到播放列表" placement="top-start">
                          <span style="margin-left:10px" class="cursor_class">
                            <el-icon @click="handleClickAddList(item)">
                              <Plus />
                            </el-icon>
                          </span>
                        </el-tooltip>
                        <el-tooltip class="box-item" effect="dark" content="收藏" placement="top-start">
                          <span style="margin-left:10px" class="cursor_class" @click="openCollectionModal(item.id)">
                            <el-icon>
                              <FolderAdd />
                            </el-icon>
                          </span>
                        </el-tooltip>
                      </div>
                      </p>
                    </div>
                    <div class="look_more">
                      <el-button link @click="()=>{router.push('/discover/toplist?id=' + hotId)}">查看全部 &gt;</el-button>
                    </div>
                  </div>
                </el-col>
                <el-col :lg="8" :md="8" style="margin-bottom:20px">
                  <div class="top_item">
                    <div class="top_title_msg">
                      <div class="left_top_img">
                        <img src="http://p4.music.126.net/wVmyNS6b_0Nn-y6AX8UbpQ==/109951166952686384.jpg?param=100y100"
                          alt="">
                      </div>
                      <div class="right_tit_wrap">
                        <div class="r_tit">
                          新歌榜
                        </div>
                        <div class="r_icon">
                          <el-tooltip class="box-item" effect="dark" content="播放" placement="top-start">
                            <span class="cursor_class">
                              <el-icon>
                                <VideoPlay />
                              </el-icon>
                            </span>
                          </el-tooltip>
                          <el-tooltip class="box-item" effect="dark" content="收藏" placement="top-start">
                            <span style="margin-left:10px" class="cursor_class"
                              @click="handleClickCollectionPlayList(2)">
                              <el-icon>
                                <FolderAdd />
                              </el-icon>
                            </span>
                          </el-tooltip>
                        </div>
                      </div>
                    </div>
                    <div class="bottom_music_list">
                      <p class="top_music_item" v-for="(item,index) in newMusicTopListData" :key="item.id">
                        <span class="num">{{index + 1}}</span>
                      <div class="content cursor_class text_ellipsis text_decoration"
                        @click="handleClickTopListSongName(item.id)">
                        {{item.name}}</div>
                      <div class="opeation_wrpper">
                        <el-tooltip class="box-item" effect="dark" content="播放" placement="top-start">
                          <span class="cursor_class">
                            <el-icon @click="handleClickPlay(item)">
                              <VideoPlay />
                            </el-icon>
                          </span>
                        </el-tooltip>
                        <el-tooltip class="box-item" effect="dark" content="添加到播放列表" placement="top-start">
                          <span style="margin-left:10px" class="cursor_class">
                            <el-icon @click="handleClickAddList(item)">
                              <Plus />
                            </el-icon>
                          </span>
                        </el-tooltip>
                        <el-tooltip class="box-item" effect="dark" content="收藏" placement="top-start">
                          <span style="margin-left:10px" class="cursor_class" @click="openCollectionModal(item.id)">
                            <el-icon>
                              <FolderAdd />
                            </el-icon>
                          </span>
                        </el-tooltip>
                      </div>
                      </p>
                    </div>
                    <div class="look_more">
                      <el-button link @click="()=>{router.push('/discover/toplist?id=' + newId)}">查看全部 &gt;</el-button>
                    </div>
                  </div>
                </el-col>
                <el-col :lg="8" :md="8" style="margin-bottom:20px">
                  <div class="top_item">
                    <div class="top_title_msg">
                      <div class="left_top_img">
                        <img src="http://p3.music.126.net/iFZ_nw2V86IFk90dc50kdQ==/109951166961388699.jpg?param=100y100"
                          alt="">
                      </div>
                      <div class="right_tit_wrap">
                        <div class="r_tit">
                          原创榜
                        </div>
                        <div class="r_icon">
                          <el-tooltip class="box-item" effect="dark" content="播放" placement="top-start">
                            <span class="cursor_class">
                              <el-icon>
                                <VideoPlay />
                              </el-icon>
                            </span>
                          </el-tooltip>
                          <el-tooltip class="box-item" effect="dark" content="收藏" placement="top-start">
                            <span style="margin-left:10px" class="cursor_class"
                              @click="handleClickCollectionPlayList(3)">
                              <el-icon>
                                <FolderAdd />
                              </el-icon>
                            </span>
                          </el-tooltip>
                        </div>
                      </div>
                    </div>
                    <div class="bottom_music_list">
                      <p class="top_music_item" v-for="(item,index) in slefMusicTopListData" :key="item.id">
                        <span class="num">{{index + 1}}</span>
                      <div class="content cursor_class text_ellipsis text_decoration"
                        @click="handleClickTopListSongName(item.id)">
                        {{item.name}}</div>
                      <div class="opeation_wrpper">
                        <el-tooltip class="box-item" effect="dark" content="播放" placement="top-start">
                          <span class="cursor_class">
                            <el-icon @click="handleClickPlay(item)">
                              <VideoPlay />
                            </el-icon>
                          </span>
                        </el-tooltip>
                        <el-tooltip class="box-item" effect="dark" content="添加到播放列表" placement="top-start">
                          <span style="margin-left:10px" class="cursor_class">
                            <el-icon @click="handleClickAddList(item)">
                              <Plus />
                            </el-icon>
                          </span>
                        </el-tooltip>
                        <el-tooltip class="box-item" effect="dark" content="收藏" placement="top-start">
                          <span style="margin-left:10px" class="cursor_class" @click="openCollectionModal(item.id)">
                            <el-icon>
                              <FolderAdd />
                            </el-icon>
                          </span>
                        </el-tooltip>
                      </div>
                      </p>
                    </div>
                    <div class="look_more">
                      <el-button link @click="()=>{router.push('/discover/toplist?id=' + selfId)}">查看全部 &gt;</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>

            </div>
          </div>
        </el-col>
        <el-col :lg="8">
          <el-card class="box-card" shadow="never" style="border:0">
            <template #header>
              <div class="card-header">
                <span>入驻歌手</span>
                <el-button class="button" link @click="handleClickLookSinger">查看全部 &gt;</el-button>
              </div>
            </template>
            <div class="come_singer">
              <div class="come_singer_item cursor_class" v-for="item in staySingerData" :key="item.id"
                @click="handleClickToArtistDetail(item.id)">
                <div class="item_left">
                  <img :src="item.picUrl + '?param=62y62'" alt="">
                </div>
                <div class="item_right">
                  <p class="text_ellipsis">{{item.name}}</p>
                  <div class="text_muted text_ellipsis">{{item.desc}}</div>
                </div>
              </div>
              <div style="display: flex;justify-content: center;">
                <a href="https://music.163.com/st/musician" target="_blank">
                  <el-button>
                    申请成为网易音乐人
                  </el-button>
                </a>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
  <Collection @handleAddSuccess="handleAddSuccess" ref="collectionRef" />
  <!-- 登录注册弹窗 -->
  <LoginAndRegister ref="loginAndRegisterRef" />
</template>

<script lang="ts" setup>
import { onMounted, ref, getCurrentInstance, toRaw, reactive, Ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import { Pagination, Navigation } from 'swiper'
// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import { Autoplay } from 'swiper'
import { Headset, VideoPlay, FolderAdd, Plus } from '@element-plus/icons-vue'
import CdMusic from "@/components/CdMusic/index";
import MusicHead from "@/components/MusicHead/index";
import router from '@/router';
import { getHotPlayList, getAlbumNewest, getTopList, getPlayList, getArtistList, getArtistDesc } from "@/api/index";
import { getPlaylistSubscribe } from "@/api/playlist";
import { ElMessage } from 'element-plus'
import Collection from "@/components/Collection/index"
import { collectionTypeRef } from "@/types/collection";
import { loginAndRegisterTypeRef } from "@/types/login";
import LoginAndRegister from '@/components/LoginAndRegister/index'
import { useStore } from "vuex";
import { checkMusic } from '@/api/my-music'
import { useRoute } from 'vue-router';
const loginAndRegisterRef = ref<loginAndRegisterTypeRef | null>()
const store = useStore()
const route = useRoute()
const modules = [Pagination, Navigation]
//定义swiperNew,目的获取非响应式swiper
let swiperNew: any
const onSwiper = (swiper: any) => {
  swiperNew = toRaw(swiper) //拿到swiper对象再转换为非响应式
}
// 热门推荐歌单
const hotPlayListData = ref<any[]>([])
// 新碟上架
const albumNewestData = ref<any[]>([])
// 飙升榜
// const loading1 = ref(false)
const hotMusicTopListData = ref<any[]>([])
const hotId = ref<string | number | string[]>(0)
// 新歌榜
const newMusicTopListData = ref<any[]>([])
const newId = ref<string | number | string[]>(0)
// 原创榜
const slefMusicTopListData = ref<any[]>([])
const selfId = ref<string | number | string[]>(0)

// 入驻歌手
const staySingerData = ref<any[]>([])
// 入驻歌手前十条
const staySingerarr10 = ref<any[]>([])
const collectionRef = ref<collectionTypeRef | null>(null)
const handleClickLookSinger = () => {
  router.push('/discover/artist')
}
// 榜单点击歌曲名字去歌曲详情播放页
const handleClickTopListSongName = (id: number) => {
  router.push({
    name: 'song',
    params: {
      id
    }
  })
}
// 去歌单详情页
const handleClickToListDetail = (id: number) => {
  router.push({
    name: 'play-list-detail',
    params: {
      id
    }
  })
}
// 去专辑详情页
const handleClickToAlbumDetail = (id: number) => {
  router.push({
    name: 'album-detail',
    params: {
      id
    }
  })
}
// 去歌手 / 艺人 详情页
const handleClickToArtistDetail = (id: number) => {
  router.push({
    name: 'artist-detail',
    params: {
      id
    }
  })
}
// 获取热门推荐歌单
const getHotPlayListData = async () => {
  const res: any = await getHotPlayList({
    limit: 8,
  })
  hotPlayListData.value = res.result
}
// 获取云音乐首页新碟上架数据
const getAlbumNewestData = async () => {
  const res: any = await getAlbumNewest()
  // console.log(res);
  albumNewestData.value = res.albums
}
const getTopListData = async () => {
  // 第一次请求拿所有榜单对应的id
  const res: any = await getTopList()
  let hotMusicTopObj = res.list.find((o: { name: string; }) => o.name === '飙升榜')
  let newMusicTopObj = res.list.find((o: { name: string; }) => o.name === '新歌榜')
  let selfMusicTopObj = res.list.find((o: { name: string; }) => o.name === '原创榜')
  // 第二请求歌单详情传入对应榜单的id
  responeMusicTopListData(hotMusicTopObj.id, hotMusicTopListData)
  responeMusicTopListData(newMusicTopObj.id, newMusicTopListData)
  responeMusicTopListData(selfMusicTopObj.id, slefMusicTopListData)
  hotId.value = hotMusicTopObj.id
  newId.value = newMusicTopObj.id
  selfId.value = selfMusicTopObj.id
}
/**
 * 请求歌单详情 只需要10条
 */
const responeMusicTopListData = async (id: number, backArray: Ref<any[]>) => {
  try {
    const res: any = await getPlayList({
      id
    })
    // 截取前10条
    backArray.value = res.playlist.tracks.splice(0, 10)
  } finally {
    // loading1.value = false
  }
}
// 点击收藏榜单歌单
const handleClickCollectionPlayList = (from: number) => {
  if (from === 1) {
    // console.log(hotId.value);
    collectionPlayList(hotId.value)
  } else if (from === 2) {
    collectionPlayList(newId.value)
  } else if (from === 3) {
    collectionPlayList(selfId.value)
  }
}
// 收藏歌单
const collectionPlayList = async (id: string | number | string[]) => {
  let cookie = localStorage.getItem('cookie')
  if (cookie) {
    try {
      const res: any = await getPlaylistSubscribe({
        t: 1,
        id,
        cookie
      })
      ElMessage({
        message: "收藏成功!",
        type: 'success',
        duration: 5000,
      })
    } catch (err: any) {
      console.log(err);
      if (err.code === 501) {
        ElMessage({
          message: "请勿重复收藏!",
          type: 'error',
          duration: 5000,
        })
      }
    } finally {

    }
  } else {
    if (loginAndRegisterRef.value) {
      console.log(loginAndRegisterRef.value.loginVisible);
      loginAndRegisterRef.value.loginVisible = true
      loginAndRegisterRef.value.getQrKeyData()
    }
  }
}
const getArtistListData = async () => {
  const res: any = await getArtistList({
    cat: 5001,
    limit: 10
  })
  staySingerarr10.value = res.artists
  let descArr: string[] = []
  staySingerarr10.value.forEach(async (item: any) => {
    const res2: any = await getArtistDesc({
      id: item.id
    })
    descArr.push(res2.briefDesc)
    descArr.forEach(items => {
      item.desc = items
    })
  })
  staySingerData.value = staySingerarr10.value
}
// 歌曲收藏成功回调
const handleAddSuccess = () => {

}
// 打开收藏组件
const openCollectionModal = (id: number) => {
  if (collectionRef.value) {
    collectionRef.value.id = id
    collectionRef.value.isSongSheet = false
    collectionRef.value.dialogVisible = true
    collectionRef.value.init()
  }
}
// 播放全部音乐
const handleClickPlayAll = (num: number) => {
  if (num === 1) {
    getPlayListData(hotId.value)
  } else if (num === 2) {
    getPlayListData(newId.value)
  } else if (num === 3) {
    getPlayListData(selfId.value)
  }
}
const getPlayListData = async (id: any) => {
  const res: any = await getPlayList({
    id
  })
  let list = filterMusicData(res.playlist.tracks)
  store.dispatch('playAll', { list });
}
// 把需要vip的过滤出去
const filterMusicData = (tracks:any[]): any[] => {
  let list = tracks.filter((item: any)=>{
    return item.fee != 1
  })
  return list
}
// 播放单个音乐
const handleClickPlay = (item: any) => {
  checkMusicData(item, 1)
}
// 添加到播放列表
const handleClickAddList = (item: any) => {
  checkMusicData(item, 2)
}
// 检测单个音乐是否可用
const checkMusicData = async (row: any, num: number) => {
  const res: any = await checkMusic({
    id: row.id
  })
  if (res.success) {
    if (num === 1) {
      store.dispatch('selectPlay', { list: [row] });
    } else if (num === 2) {
      store.dispatch('addList', { list: [row] });
    }
  } else {
    ElMessage({
      message: res.message || '当前音乐不可用',
      type: 'error',
    })
  }
}
onMounted(() => {
  getHotPlayListData()
  getAlbumNewestData()
  getTopListData()
  getArtistListData()
})
</script>
<style lang="scss" scoped>
.index_container {
  .my_swiper {
    height: 560px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .second_menu_fa_wrap {
    position: relative;

    .top-two {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
      height: 60px;
      -webkit-box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 5%);
      box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 5%);
      background: rgba(0, 169, 255, 0.04);
      background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6));
      backdrop-filter: saturate(180%) blur(6px);
      display: flex;
      align-items: center;
      justify-content: space-around;
      z-index: 2;
    }
  }

  .hot_recommend_container {
    .ht_recommend_music_wrapper {

      // display: flex;
      // flex-wrap: wrap;
      // margin-left: -20px;
      .hot_recommend_music_item {

        // width: 140px;
        // margin: 0 0 20px 40px;
        .ht_item_img_wrap {
          height: 140px;
          position: relative;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 27px;
            color: #ccc;
            background: rgba(0, 0, 0, .5);
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
            box-sizing: border-box;
          }

        }

        .ht_item_desc {
          margin: 8px 0 3px;
          font-size: 14px;
        }
      }
    }
  }

  .new_cd_container {
    margin-top: 50px;

    .new_cd_wrpper {
      // height: 140px;
      // background: #f5f5f5;
      // border: 1px solid #d3d3d3;
      // padding: 40px 20px;

      .new_cd_swiper {
        height: 100%;

        // background: #fff;
      }
    }

  }

  .top_container {
    .top_item {
      .top_title_msg {
        display: flex;

        .left_top_img {
          width: 80px;
          height: 80px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .right_tit_wrap {
          margin-left: 10px;

          .r_tit {
            color: #333;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 10px;
          }

          .r_icon {
            font-size: 26px;
            color: #8c92a4;
          }
        }
      }

      .bottom_music_list {
        margin-top: 20px;

        .top_music_item {
          font-size: 12px;
          display: flex;
          padding-right: 2vw;
          height: 20px;

          // justify-content: space-between;
          .num {
            min-width: 35px;
            // text-align: center;
            color: #666;
            font-size: 14px;
          }

          .content {
            flex: 1;
          }

          &:nth-child(1) .num {
            color: #c10d0c;
          }

          &:nth-child(2) .num {
            color: #c10d0c;
          }

          &:nth-child(3) .num {
            color: #c10d0c;
          }

          .opeation_wrpper {
            display: none;
            margin-left: 20px;
            font-size: 16px;
          }

          &:hover {
            .opeation_wrpper {
              display: block;
            }
          }
        }
      }

      .look_more {
        display: flex;
        justify-content: flex-end;
        padding-right: 2vw;
      }
    }
  }

  .panel_title {
    display: flex;
    justify-content: space-between;
    user-select: none;
    // border-bottom: 2px solid #00A9FF;
    // padding-bottom: 14px;
    margin: 30px 0px 8px;

    h3 {
      font-size: 26px;
      font-weight: 500;
      color: #000000;
      margin: 0;
    }
  }

  .panel_content {
    padding: 20px 0;
  }
}

.box-card {
  margin-top: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
  }

  .come_singer {
    .come_singer_item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .item_left {
        width: 62px;
        height: 62px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .item_right {
        margin-left: 10px;
        flex: 1;
        overflow: hidden;

        p {
          margin: 0;
          font-weight: 700;
          color: #333;
          font-size: 14px;
          margin-bottom: 10px;
        }
      }
    }
  }

}

@media screen and (max-width: 1200px) {
  .top_music_item {
    padding-right: 50px !important;
  }

  .look_more {
    padding-right: 50px !important;
  }
}

@media screen and (max-width: 768px) {
  .my_swiper {
    height: 220px !important;
  }

  .top_music_item {
    padding-right: 0 !important;
  }

  .look_more {
    padding-right: 0 !important;
  }
}

// @media screen and (max-width: 992px) {
// 	.look_more {
//     padding-right: 0 !important;
//   }
// }
.new_cd_swiper {
  --swiper-navigation-size: 20px;
  /* 设置按钮大小 */
}

:deep(.swiper-pointer-events) {
  padding: 0 30px
}
</style>
